<cfinclude template="/application.cfm">

<cftry>

<cfparam name="navId" type="numeric" default="0">
<cfparam name="showPrintable" default="0">
<cf_JelCMS_Menu	navId = "#navId#"
					datasourcename = "#datasourcename#">
<cf_JelCMS_Header	navId = "#navId#"
					datasourcename = "#datasourcename#"
					directoryPathToTemplates = "#directoryPathToTemplates#">		
<cf_JelCMS_Footer	navId = "#navId#"
					datasourcename = "#datasourcename#"
					directoryPathToTemplates = "#directoryPathToTemplates#">


<cfscript>
	inWorkshops = false;
	currentParentId = listFirst(parentIdList);
	if (listLen(parentIdList) gt 1) {
		currentParentId = listGetAt(parentIdList, 2);
		if (currentParentId eq 5) {
			inWorkshops = true;
		}
	}
</cfscript>

<cfif structCount(form)>

	<cfset Cffp = CreateObject("component","globals.cfformprotect.cffpVerify").init() />
	<cfset test = Cffp.testSubmission(form)>
	<cfif test>

		<cfset cfg_formName="Become a Volunteer">
		<cfset cfg_emailTo="DCostopoulos@csac.ca.gov,cash4college@csac.ca.gov">
		<cfset cfg_emailFromFieldname="email">
		<cfset cfg_emailSubject="Cash for College Volunteer Submission">
	
		<cfparam name="form.volunteerID" default="0">
		<cfparam name="form.deleted" default="0">
		<cfparam name="form.status" default="0">
		<cfparam name="form.notes" default="">
		<cfparam name="form.Statewide" default="0">
		<cfparam name="form.Fafsa_Expert" default="0">
		<cfparam name="form.OneOnOne_Assistance" default="0">
		<cfparam name="form.Support_Volunteer" default="0">
		<cfparam name="form.Interpreter" default="0">
		<cfparam name="form.Created_By" default="0">
	
		<cfset vol = application.volunteerGateway.save(form)>
		<cfset cfg_emailTo = application.volunteerGateway.getVolunteerRegionContacts(vol.getVolunteer_ID(), cfg_emailTo)>
		<cfset vol.volunteerCities = application.volunteerGateway.getUniqueCityNames(vol.getVolunteer_ID())>
		
		<cfif len(trim(cfg_emailFromFieldname))>
			<cfif len(trim(form[cfg_emailFromFieldname]))>
				<cfset cfg_emailFrom = form[cfg_emailFromFieldname]>
			</cfif>
		</cfif>
		<cfif http_host contains "jelinc">
			<cfset cfg_emailSubject = "#cfg_emailSubject# - intended for: #cfg_emailTo#">
			<cfset cfg_emailTo = "beamer@jel.net">
			<cfif http_host contains "jelinc.com">
				<cfset cfg_emailTo = listAppend(cfg_emailTo, "DCostopoulos@csac.ca.gov")>
			</cfif>
		</cfif>
		<cfif Len(Trim(cfg_emailTo)) gt 0 and Len(Trim(cfg_emailFrom)) gt 0>
		
			<cfmail to="#cfg_emailTo#" from="#cfg_emailFrom#" subject="#cfg_emailSubject#" type="HTML">
			<cfoutput>
			
			<p><strong>#DateFormat(now(), 'dddd, mmmm d, yyyy')# #TimeFormat(now(), 'h:mm tt')#</strong></p>
			
			<table border="1" cellspacing="0" cellpadding="4">
				<tr valign="top">
					<td>First Name<br></td>
					<td>#vol.getFirst_Name()#</td>
				</tr>
				<tr valign="top">
					<td>Last Name<br></td>
					<td>#vol.getLast_Name()#</td>
				</tr>
				<tr valign="top">
					<td>Title<br></td>
					<td>#vol.getTitle()#</td>
				</tr>
				<tr valign="top">
					<td>Organization<br></td>
					<td>#vol.getOrganization()#</td>
				</tr>
				<tr valign="top">
					<td>Address<br></td>
					<td>#vol.getAddress()#</td>
				</tr>
				<tr valign="top">
					<td>Address2<br></td>
					<td>#vol.getAddress2()#</td>
				</tr>
				<tr valign="top">
					<td>City<br></td>
					<td>#vol.getCity()#</td>
				</tr>
				<tr valign="top">
					<td>Zip<br></td>
					<td>#vol.getZip_Code()#</td>
				</tr>
				<tr valign="top">
					<td>Phone<br></td>
					<td>#vol.getPhone1()#</td>
				</tr>
				<tr valign="top">
					<td>Fax<br></td>
					<td>#vol.getPhone2()#</td>
				</tr>
				<tr valign="top">
					<td>Email<br></td>
					<td>#vol.getEmail()#</td>
				</tr>
				<tr valign="top">
					<td>Statewide?<br></td>
					<td>#yesnoformat(vol.getStatewide())#</td>
				</tr>
				<tr valign="top">
					<td>Volunteer Cities<br></td>
					<td>#vol.volunteerCities#</td>
				</tr>
				<tr valign="top">
					<td>FAFSA Expert?<br></td>
					<td>#yesnoformat(vol.getFafsa_Expert())#</td>
				</tr>
				<tr valign="top">
					<td>One-on-one assistance<br></td>
					<td>#yesnoformat(vol.getOneOnOne_Assistance())#</td>
				</tr>
				<tr valign="top">
					<td>Support volunteer<br></td>
					<td>#yesnoformat(vol.getSupport_Volunteer())#</td>
				</tr>
				<tr valign="top">
					<td>Interpreter<br></td>
					<td>#yesnoformat(vol.getInterpreter())#</td>
				</tr>
				<tr valign="top">
					<td>Languages<br></td>
					<td>#vol.getInterpreter_Languages()#</td>
				</tr>
				<tr valign="top">
					<td>Shirt Size<br></td>
					<td>#vol.getShirt_Size()#</td>
				</tr>
			</table>
			
			</cfoutput>
			</cfmail>
		
		</cfif>
	</cfif>
	<cflocation url="#cfg_returnURL#" addtoken="No">

</cfif>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
		<title>Student Grants, Student Loans FAFSA, Grants for College Students</title>
		<link href="/globals/js/jquery.ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" media="screen" />

		<link rel="stylesheet" href="/common/styles.css">
		<cfoutput><link rel="stylesheet" href="#urlPathToStyleSheet#"></cfoutput>

		<script src="/globals/js/jquery.js" type="text/javascript"></script>
		<script src="/globals/js/jquery.ui/ui/minified/jquery.ui.core.min.js"></script>
		<script src="/globals/js/jquery.ui/ui/minified/jquery.ui.widget.min.js"></script>
		<script src="/globals/js/jquery.ui/ui/minified/jquery.ui.button.min.js"></script>
		<script src="/globals/js/jquery.ui/ui/minified/jquery.ui.position.min.js"></script>
		<script src="/globals/js/jquery.ui/ui/minified/jquery.ui.autocomplete.min.js"></script>

		<script src="/globals/js/debug.js" type="text/javascript"></script>

		<script language="javascript" src="/common/scripts.js"></script>
		
		<script language="JavaScript" src="/common/dhtml.js"></script>
		<link href="/common/dhtml.css" rel="stylesheet">
		
<script type="text/javascript">

$(function() {
	$.widget("ui.combobox", {
		options: {
			appendTo: "body",
			delay: 300,
			minLength: 3,
			maxLength: 250,
			position: {
				my: "left top",
				at: "left bottom",
				collision: "none"
			},
			source: null
		},
		_create: function() {
			var self = this,
				select = this.element.hide(),
				selected = select.children(":selected"),
				value = selected.val() ? selected.text() : "";
				
			var input = $("<input id='" + select[0].id + "_combobox'>")
				.insertAfter(select)
				.val(value)
				.autocomplete({
					delay: 0,
					minLength: self.options.minLength,
					maxLength: self.options.maxLength,
					source: function(request, response) {
						var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
						response(select.children("option").map(function() {
							var text = $(this).text();
							if (this.value && (!request.term || matcher.test(text)))
								return {
									label: text.replace(
										new RegExp(
											"(?![^&;]+;)(?!<[^<>]*)(" +
											$.ui.autocomplete.escapeRegex(request.term) +
											")(?![^<>]*>)(?![^&;]+;)", "gi"
										), "<strong>$1</strong>"),
									value: text,
									option: this
								};
						}));
					},
					select: function(event, ui) {
						ui.item.option.selected = true;
						self._trigger("selected", event, {
							item: ui.item.option
						});
					},
					change: function(event, ui) {
						self._trigger("change", event, ui);
						if (!ui.item) {
							var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
								valid = false;
							select.children("option").each(function() {
								if (this.value.match(matcher)) {
									this.selected = valid = true;
									return false;
								}
							});
							if (!valid) {
								// remove invalid value, as it didn't match anything
								$(this).val("");
								select.val("");
								return false;
							}
						}
					}
				})
				.addClass("ui-widget ui-widget-content ui-corner-left");

			input.data("autocomplete")._renderItem = function(ul, item) {
				return $("<li></li>")
					.data("item.autocomplete", item)
					.append("<a>" + item.label + "</a>")
					.appendTo(ul);
			};

			$("<button type='button' id='" + select[0].id + "_comboboxButton'>&nbsp;</button>")
				.attr("tabIndex", -1)
				.attr("title", "Show All Items")
				.insertAfter(input)
				.button({
					icons: {
						primary: "ui-icon-triangle-1-s"
					},
					text: false
				})
				.removeClass("ui-corner-all")
				.click(function() {
					// close if already visible
					if (input.autocomplete("widget").is(":visible")) {
						input.autocomplete("close");
						return;
					}

					// pass empty string as value to search for, displaying all results
					input.autocomplete("search", "");
					input.focus();
				}
			);
		}
	});


	$("#volunteerCity").combobox({
		selected: function(event, ui) {
			debug("city selected: " + ui.item.value + " : " + ui.item.text);
			addCity(ui.item.value, ui.item.text);
		}
	});
	
});

volunteerCities = {};
addCity = function(id, text) {
	debug("addCity(" + id + ")");
	
	if (id != 0) {
		debug("Adding: " + text);
		volunteerCities[id] = text;
		renderVolunteerCities();
		setTimeout(function() { resetCombo("volunteerCity") }, 1);
	}
}
renderVolunteerCities = function() {
	debug("renderVolunteerCities()");

	var outp = "<ul class='non'>";
	var ids = new Array();
	var count = 0;
	for (var i in volunteerCities) {
		ids[ids.length] = i;
		outp += "<li>" + volunteerCities[i] + " <a href='' onclick='removeVolunteerCity(\"" + i + "\"); return false;' class='remove'>X Remove</a></li>";
		count++;
	}
	outp += "</ul>";
	$("#volunteerCities").val(ids)
	$("#volunteerCitiesList").html(outp);
	if (count > 0) {
		$("#volunteerCitiesList ul").show();
	} else {
		$("#volunteerCitiesList ul").hide();
	}

	debug("renderVolunteerCities hidden field: " + $("#volunteerCities").val());
}
removeVolunteerCity = function(id) {
	debug("removeVolunteerCity(" + id + ")");

	var tmp = {};
	for (var i in volunteerCities) {
		if (i != id) {
			tmp[i] = volunteerCities[i];
		}
	}
	volunteerCities = tmp;
	renderVolunteerCities();
}

resetCombo = function(id) {
	$("#" + id).val("");
	$("#" + id + "_combobox").val("");
	$("#" + id).change();
}

function isEmptyString(testString) {
	re = /\S+/;
	return !re.test(testString);
}

validate = function(form) {
	if (isEmptyString(form.volunteerCities.value) && !form.statewide.checked) {
		alert("Please choose at least one city you'd like to volunteer in");
		$("#volunteerCity_combobox").focus();
		return false;
	}
	if (form.Interpreter.checked && isEmptyString(form.Interpreter_Languages.value)) {
		alert("Please enter the languages you can serve as an Interpreter for.");
		$("#Interpreter_Languages").focus();
		return false;
	}
	return true;
}

stateWide = function(cb) {
	if (cb.checked) {
		volunteerCities = {};
		renderVolunteerCities();
		$("#volunteerCity_combobox").autocomplete("disable");
		$("#volunteerCity_combobox").attr("disabled", true);
		$("#volunteerCity_combobox").addClass("disabled");
	} else {
		$("#volunteerCity_combobox").autocomplete("enable");
		$("#volunteerCity_combobox").removeAttr("disabled");
		$("#volunteerCity_combobox").removeClass("disabled");
	}
}


</script>
<style type="text/css">
<!--

.ui-widget {
	margin: 0px;
}
.ui-autocomplete-input {
	padding: 2px 6px;
	vertical-align: top;
	color: #181818;
	width: 205px;
}
.disabled {
	opacity: .5;
}
.ui-button-text {
	padding: 0px !important;
}
.ui-button-icon-only {
	display: none;
}

.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-corner-br,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-left,
.ui-corner-all,
.ui-autocomplete {
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.ui-menu {
	max-height: 180px;
	overflow-y: auto;
	text-align: left;
	min-width: 180px;
	max-width: 360px;
	background-image: none !important;
}

#volunteerCitiesList ul {
	margin: 0px;
	list-style-type: none;
	width: 250px;
}
#volunteerCitiesList ul li {
	position: relative;
	margin-top: .7em;
}
#volunteerCitiesList ul li a {
	position: absolute;
	right: 0px;
}
-->
</style>
<cfoutput>
		<cfif inWorkshops>
			<link rel="stylesheet" href="/common/workshops.css">
		</cfif>

		<meta name="description" content=" Calgrants.org is a free online resource that gives information about student grants, financial aid and grants, college financial aid, scholarships for students, student loan, etc.">
		<meta name="keywords" content="student grants, student loans FAFSA, student scholarships, grants for college students, college grant">

	</head>
	<cfparam name="onloadProcs" default="">
	<body onLoad="doLoadProc();#onloadProcs#">
		<div id="hideDhtml" onMouseOver="hideLayer('hideDhtml'); delayedNavHide();">
			<a href="javascript:void(0);" onMouseOver="hideLayer('hideDhtml'); delayedNavHide();"><img src="/common/images/spacer.gif" width="99%" height="99%" border="0" alt="" galleryimg="no"></a>
		</div>

		<div class="main">
			<table border="0" cellpadding="0" cellspacing="0" class="mainTable">
				<tr valign="top">
					<td class="contentColumn">
						<cfif not showPrintable>
							<cfif Len(header.fileName) gt 0>
								<cfinclude template="#CFMapping_Root#/templates/#header.fileName#">
							</cfif>
						</cfif>

				
						<div class="contentContainer">
							<table border="0" cellpadding="0" cellspacing="0">
								<tr valign="top">
									<td class="subnav">
										<cfinclude template="/common/subnav.cfm">
										<p><br />
										<a href="http://www.facebook.com/Cash.for.College.California/" target="_blank"><img height="68" alt="Find us on Facebook" src="/common/images/facebook-badge.jpg" width="168" border="0" /></a><a href="http://www.facebook.com/Cash.for.College.California" target="_blank"></a></p>
										<img src="/common/images/spacer.gif" width="184" height="1" alt="" border="0"><br>
									</td>
									<td class="content">
										<p class="pageTitle"><img title="Cash for College is here for you." height="72" alt="Cash for College is here for you." src="../common/images/workshops-subbar.gif" width="543" border="0" /></p>
										
										<p class="pageTitle">Want to Be a Volunteer?</p>
										
										<p>Cash for College workshops are a real team effort and their success depends upon the help of many dedicated volunteers. Without volunteers like you, these valuable workshops would not take place.</p>
										<p>To volunteer, fill out the form below. We'll notify you with your assignment when we get closer to the workshop dates.</p>

										<cfform action="#script_name#" method="POST" name="volunteerForm" onsubmit="return validate(document.volunteerForm);">
											<input type="hidden" name="cfg_returnUrl" value="/index.cfm?navid=93">

											<cfset Cffp = CreateObject("component","globals.cfformprotect.cffpVerify").init() />  
											<cfinclude template="/globals/cfformprotect/cffp.cfm">

											<div class="tableHeader"><img src="/common/images/1-Your-Personal-Information.gif" width="217" height="28" alt="Your Personal Information" border="0"></div>
											<div class="gradientBox" style="padding-left: 10px; padding-right: 10px; padding-top: 6px;">
												<table border="0" cellpadding="2" cellspacing="0" width="515">
													<tr>
														<td>* First Name:</td>
														<td><cfinput class="formField" type="Text" name="First_Name" message="First Name is required" required="Yes"><br></td>
														<td align="right">* Required Field<br></td>
													</tr>
													<tr>
														<td>* Last Name:</td>
														<td><cfinput class="formField" type="Text" name="Last_Name" message="Last Name is required" required="Yes"><br></td>
													</tr>
													<tr>
														<td>Title:</td>
														<td><cfinput class="formField" type="Text" name="title" required="No"><br></td>
													</tr>
													<tr>
														<td>Organization:</td>
														<td><cfinput class="formField" type="Text" name="organization" required="No"><br></td>
													</tr>
													<tr>
														<td>* Address 1:</td>
														<td><cfinput class="formField" type="Text" name="Address" message="Address is required" required="Yes"><br></td>
													</tr>
													<tr>
														<td>Address 2:</td>
														<td><cfinput class="formField" type="Text" name="address2" required="No"><br></td>
													</tr>
													<tr>
														<td>* City:</td>
														<td><cfinput class="formField" type="Text" name="city" message="City is required" required="Yes"><br></td>
													</tr>
													<tr>
														<td style="padding-bottom: 5px;">State:</td>
														<td style="padding-bottom: 5px;">CA<br></td>
													</tr>
													<tr>
														<td>* Zip Code:</td>
														<td><cfinput class="formField" type="Text" name="zip_code" message="Zip Code is required" required="Yes"><br></td>
													</tr>
													<tr>
														<td colspan="2">&nbsp;</td>
													</tr>
													<tr>
														<td>Telephone:</td>
														<td><cfinput class="formField" type="Text" name="Phone1" required="No"><br></td>
													</tr>
													<tr>
														<td>Fax:</td>
														<td><cfinput class="formField" type="Text" name="Phone2" required="No"><br></td>
													</tr>
													<tr>
														<td>* E-mail:</td>
														<td><cfinput class="formField" type="Text" name="email" message="E-mail is required" required="Yes"><br></td>
													</tr>
												</table>
											</div>
											<br><br>
											<div class="tableHeader"><img src="/common/images/2-Volunteer-Information.gif" width="187" height="28" alt="Volunteer Information" border="0"></div>
											<div class="gradientBox" style="padding-left: 10px; padding-right: 10px; padding-top: 6px;">
												<table border="0" cellpadding="2" cellspacing="0" width="515">
													<tr valign="top">
														<td colspan="2">Geographic area where you would like to volunteer (Select all cities that apply):<br></td>
													</tr>
													<tr valign="top">
														<td width="150">* City:</td>
														<td>
															<cfset application.cityGateway = CreateObject('component', 'applications.workshops.components.cityGateway')>
															<cfset cities = application.cityGateway.getUnique()>
															<input type="hidden" name="volunteerCities" id="volunteerCities" value="" />
															<cfselect name="volunteerCity" class="combobox">
																<option value=""></option>
																<cfloop query="cities">
																	<option value="#ids#">#city#</option>
																</cfloop>
																<!--- <cfoutput query="cities" group="city">
																	<cfset ids = "">
																	<cfoutput>
																		<cfset ids = ListAppend(ids, city_id)>
																	</cfoutput>
																	<option value="#ids#">#city#</option>
																</cfoutput> --->
															</cfselect>
															<div id="volunteerCitiesList"></div>
														</td>
													</tr>
													<tr valign="top">
														<td>&nbsp;</td>
														<td><cfinput type="Checkbox" name="statewide" value="1" onClick="stateWide(this);"> Statewide</td>
													</tr>
													<tr valign="top">
														<td colspan="2">&nbsp;</td>
													</tr>
													<tr valign="top">
														<td colspan="2">
															Please mark one or more of the following roles:
															<ul>
																<li>FAFSA Expert: must be a practicing college financial aid administrator.</li>
																<li>One-on-one Assistance: requires one hour of training.</li>
																<li>Support Volunteer: registration tables, setup, cleanup, etc.</li>
																<li>Interpreter: give language assistance at workshops.</li>
															</ul>
														</td>
													</tr>
													<tr valign="top">
														<td colspan="2"><cfinput type="Checkbox" name="FAFSA_Expert" value="1"> FAFSA expert<br></td>
													</tr>
													<tr valign="top">
														<td colspan="2"><cfinput type="Checkbox" name="OneOnOne_Assistance" value="1"> One-on-one assistance<br></td>
													</tr>
													<tr valign="top">
														<td colspan="2"><cfinput type="Checkbox" name="Support_Volunteer" value="1"> Support volunteer<br></td>
													</tr>
													<tr valign="top">
														<td colspan="2"><cfinput type="Checkbox" name="Interpreter" value="1"> Interpreter <cfinput class="formField" type="Text" name="Interpreter_Languages" required="No"> indicate language(s)<br></td>
													</tr>
													<tr valign="top">
														<td colspan="2">&nbsp;</td>
													</tr>
													<tr valign="top">
														<td colspan="2">
															* Please indicate your t-shirt size:<br>
															<cfinput type="Radio" name="Shirt_Size" value="M"> M <cfinput type="Radio" name="Shirt_Size" value="L" checked="Yes"> L <cfinput type="Radio" name="Shirt_Size" value="XL"> XL
														</td>
													</tr>
													<tr valign="top">
														<td colspan="2">&nbsp;</td>
													</tr>
													<tr valign="top">
														<td colspan="2"><input type="submit" value="Submit"></td>
													</tr>
												</table>
											</div>
										</cfform>
									</td>
								</tr>
							</table>
						</div>

						<img src="/common/images/spacer.gif" width="744" height="1" alt="" border="0"><br>
				
						<cfif not showPrintable>
							<cfif Len(footer.fileName) gt 0>
								<cfinclude template="#CFMapping_Root#/templates/#footer.fileName#">
							</cfif>
						</cfif>
					</td>
					<td class="extraColumn">
						<img src="/common/images/bg/ds-corner.gif" width="11" height="14" alt="" border="0"><br>
					</td>
				</tr>
			</table>
		</div>
		
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-1152673-1";
urchinTracker();
</script>

	</body>
	</html>
</cfoutput>

<cfcatch type="any">
	<cfif Remote_addr eq "169.237.109.125">
	<cfdump var="#cfcatch#">
	</cfif>
</cfcatch>

</cftry>
